<style type="text/less" lang="less" scoped>
    @import url('./index.less');
</style>

<template>
    <el-container>
        <el-main class="content-main">
            <div class="ps-panel" style="height: 100%;">
                <div class="ps-panel-head">
                    <i class="ps-panel-head-icon iconfont icon-list"></i>
                    <span class="ps-panel-head-title">列表</span>
                    <span class="query">
                        <el-button type="primary" size="mini" @click="add">添加源表</el-button>
                        <el-button type="primary" size="mini" @click="labelForm.visible = true">标签设置</el-button>
                    </span>
                </div>

                <div class="ps-panel-body">
                    <el-table :data="tableData" size="small" highlight-current-row stripe style="width: 100%; margin-bottom: 10px;">
                        <el-table-column prop="source_name" label="源表"></el-table-column>
                        <el-table-column prop="target_label_name" label="目标标签"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                                v-if='paginations.total > 0'
                                :page-size="paginations.pageSize"
                                :layout="paginations.layout"
                                :total="paginations.total"
                                :current-page='paginations.pageIndex'
                                @current-change='jump'
                                style="text-align: right;">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-main>

        <el-dialog title="转换" :visible.sync="form.visible" width="450px" class="edit">
            <el-form ref="form" :model="form" :rules="form.rules" status-icon size="small" label-width="100px">
                <fieldset>
                    <legend>基本信息</legend>
                    <el-form-item label="源表：" prop="source_name"><el-input v-model="form.source_name"></el-input></el-form-item>
                    <el-form-item label="数据源：" prop="source_id">
                        <el-select v-model="form.source_id" style="width: 100%" placeholder="请选择">
                            <el-option v-for="item of sources" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="目标标签：" prop="target_label_name">
                        <el-treeselect style="width: 100%"
                                v-model="form.target_label_name"
                                placeholder="请输入搜索内容"
                                :data="labels"
                                :props="{label: 'label_name', value: 'id', children: 'children'}"
                                :clickParent="true"
                                :search="false"
                                @nodeClick="(data) =>{ this.form.target_label_id = data.id;}"
                        >
                        </el-treeselect>
                    </el-form-item>
                    <el-form-item label="查询语句：" prop="sql">
                        <el-input v-model="form.sql" :rows="2">
                            <el-button slot="append" icon="el-icon-view" @click="getFiled"></el-button>
                        </el-input>
                    </el-form-item>
                </fieldset>
                <fieldset>
                    <legend>字段信息</legend>
                    <el-table :data="form.fields" height="250" highlight-current-row stripe size="mini">
                        <el-table-column prop="source_field" label="源字段" width="180"></el-table-column>
                        <el-table-column label="目标属性">
                            <template slot-scope="scope">
                                <el-form-item label-width="0" :prop="'fields.' + scope.$index + '.target_attr'" :rules="scope.row.is_conv?{required: true, message: '不能为空', trigger: 'blur'}:{}" style="margin: 0;">
                                <el-input size="mini" v-model="scope.row.target_attr"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="转换" width="50">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.is_conv" size="mini" :true-label="1" :false-label="0"></el-checkbox>
                            </template>
                        </el-table-column>
                    </el-table>
                </fieldset>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="form.visible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="标签设置" :visible.sync="labelForm.visible" width="450px" class="edit">
            <el-tree :data="labels" node-key="id" :expand-on-click-node="false" :props="{label: 'label_name'}">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span>
                        <el-button type="text" size="mini" @click="() => addLabel(data)">添加</el-button>
                        <el-button type="text" size="mini" @click="() => editLabel(node, data)">编辑</el-button>
                        <el-button type="text" size="mini" @click="() => delLabel(node, data)">删除</el-button>
                    </span>
                </span>
            </el-tree>
        </el-dialog>

        <el-dialog title="标签" :visible.sync="labelForm.visible2" append-to-body width="350px">
            <el-form ref="labelForm" size="small" label-width="100px" :model="labelForm" :rules="labelForm.rules">
                <el-form-item label="标签名：" prop="label_name">
                    <el-input type="text" v-model="labelForm.label_name"></el-input>
                </el-form-item>
                <el-form-item label="父标签：">
                    <el-treeselect
                            v-model="labelForm.parent_name"
                            placeholder="请输入搜索内容"
                            :data="labels"
                            :props="{label: 'label_name', value: 'id', children: 'children'}"
                            :clickParent="true"
                            :search="false"
                            @nodeClick="handleTreeClick"
                            @clearFun="clearTreeClick"
                    >
                    </el-treeselect>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-select v-model="labelForm.type" style="width: 100%" placeholder="请选择">
                        <el-option label="类型" :value="1"></el-option>
                        <el-option label="实体" :value="2"></el-option>
                        <el-option label="国家" :value="3"></el-option>
                        <el-option label="地区" :value="4"></el-option>
                        <el-option label="未知" :value="5"></el-option>
                        <el-option label="关键词" :value="-1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="目标：">
                    <el-radio-group v-model="labelForm.target">
                        <el-radio-button :label="0">静目标</el-radio-button>
                        <el-radio-button :label="1">动目标</el-radio-button>
                        <el-radio-button :label="2">非目标</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="态势显示：">
                    <el-radio-group v-model="labelForm.is_show">
                        <el-radio-button :label="0">不显示</el-radio-button>
                        <el-radio-button :label="1">显示</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;">
                    <el-button @click="labelForm.visible2 = false">取 消</el-button>
                    <el-button type="primary" @click="saveLabel">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-container>

</template>

<script>
    import elTreeselect from 'el-tree-select';

    export default {
        name: "index",
        components: {elTreeselect},
        data: function () {
            const validatePass = (rule, value, callback) => {
                const patt = new RegExp('^[a-z\u4E00-\u9FA5]{1}[a-z0-9\u4E00-\u9FA5]*','ig');
                if (patt.test(value)) {
                    callback();
                } else {
                    callback(new Error('格式不正确'));
                }
            };

            return {
                paginations: {
                    pageIndex: 1,   // 当前位于哪页
                    pageSize: 20,   // 页显示多少条
                    total: 0,       // 总数
                    layout: "total, prev, pager, next"   // 翻页属性
                },
                tableData: [],
                labels: [],
                form: {
                    visible: false,
                    rules: {
                        source_name: [{required: true, message: '不能为空'}],
                        source_id: [{required: true, message: '不能为空'}],
                        target_label_name: [{required: true, message: '不能为空'}],
                        sql: [{required: true, message: '不能为空'}]
                    },
                    id: 0,
                    source_name: '',
                    source_id: null,
                    target_label_id: 0,
                    target_label_name: '',
                    sql: '',
                    fields: []
                },
                dialogVisible: false,
                delVisible: false,
                labelForm: {
                    visible: false,
                    visible2: false,
                    rules: {
                        label_name: [
                            {required: true, message: '不能为空'},
                            {validator: validatePass, trigger: 'blur' }
                        ]
                    },
                    id: 0,
                    label_name: '',
                    parent_id: '',
                    parent_name: '',
                    is_show: 0,
                    type: 1,
                    target: 0
                },
                sources: []
            };
        },
        methods:  {
            jump(i) {
                if (i === undefined) {
                    i = this.paginations.pageIndex;
                } else {
                    this.paginations.pageIndex = i;
                }

                this.$store.dispatch('ajax', {url: 'api/converter/getTableName', method: 'get', data: {page: i, number: this.paginations.pageSize},
                    succeed:
                        (res) => {
                            this.tableData = res.rows;
                            this.paginations.total = res.total;
                        }
                });
            },
            add() {
                this.form.visible = true;
                this.form.id = 0;
                this.form.source_name = '';
                this.form.source_id = null;
                this.form.target_label_id = 0;
                this.form.target_label_name = '',
                this.form.sql = '';
                this.form.fields = [];
            },
            edit(row) {
                this.form.visible = true;
                this.form.id = row.id;
                this.form.source_name = row.source_name;
                this.form.source_id = row.source_id;
                this.form.target_label_id = row.target_label_id;
                this.form.target_label_name = row.target_label_name;
                this.form.sql = row.sql;
                this.form.fields = row.fields === '' ? [] : JSON.parse(row.fields);
            },
            del(row) {
                this.$store.dispatch('ajax', {url: 'api/converter/deleteDicLabelAttr', method: 'put', data: {id: row.id}, succeed: () => {
                        this.jump();
                        this.$message.success('保存成功');
                    }
                });
            },
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const data = {
                            id: this.form.id,
                            source_name: this.form.source_name,
                            source_id: this.form.source_id,
                            target_label_id: this.form.target_label_id,
                            target_label_name: this.form.target_label_name,
                            sql: this.form.sql,
                            fields: JSON.stringify(this.form.fields)
                        };

                        if (this.form.id === 0) {
                            this.$store.dispatch('ajax', {url: 'api/converter/saveDicLabelAttr', method: 'post', data: data, succeed: () => {
                                    this.jump();
                                    this.$message.success('保存成功');
                                    this.form.visible = false;
                                }
                            });
                        } else {
                            this.$store.dispatch('ajax', {url: 'api/converter/updateDicLabelAttr', method: 'put', data: data, succeed: () => {
                                    this.jump();
                                    this.$message.success('保存成功');
                                    this.form.visible = false;
                                }
                            });
                        }
                    }
                });
            },
            addLabel(data) {
                this.labelForm.id = 0;
                this.labelForm.label_name = '';
                this.labelForm.parent_id = data.id;
                this.labelForm.parent_name = data.label_name;
                this.labelForm.is_show = 0;
                this.labelForm.type = 1;
                this.labelForm.target = 0;
                this.labelForm.visible2 = true;
            },
            editLabel(node, data) {
                this.labelForm.id = data.id;
                this.labelForm.label_name = data.label_name;
                this.labelForm.parent_id = node.parent.parent === null ? 0 : node.parent.data.id;
                this.labelForm.parent_name = node.parent.parent === null ? '' : node.parent.data.label_name;
                this.labelForm.is_show = data.is_show;
                this.labelForm.type = data.type;
                this.labelForm.target = data.target;
                this.labelForm.visible2 = true;
            },
            delLabel(node, data) {
                this.$store.dispatch('ajax', {url: 'api/converter/deleteSystemList', method: 'put', data: {id: data.id, labelName: data.label_name}, succeed: () => {
                        this.getLabels();
                        this.$message.success('删除成功');
                        this.labelForm.visible2 = false;
                    }
                });
            },
            saveLabel() {
                this.$refs.labelForm.validate((valid) => {
                    if (valid) {
                        let data = {
                            id: this.labelForm.id,
                            label_name: this.labelForm.label_name,
                            parent_id: this.labelForm.parent_id,
                            is_show: this.labelForm.is_show,
                            type: this.labelForm.type,
                            target: this.labelForm.target
                        };

                        if (this.labelForm.id === 0) {
                            this.$store.dispatch('ajax', {url: 'api/converter/saveSystemList', method: 'post', data: data, succeed: () => {
                                    this.getLabels();
                                    this.$message.success('添加成功');
                                    this.labelForm.visible2 = false;
                                }
                            });
                        } else {
                            this.$store.dispatch('ajax', {url: 'api/converter/updateSystemList', method: 'put', data: data, succeed: () => {
                                    this.getLabels();
                                    this.$message.success('编辑成功');
                                    this.labelForm.visible2 = false;
                                }
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            handleTreeClick(data) {
                this.labelForm.parent_id = data.id;
            },
            clearTreeClick() {
                this.labelForm.parent_id = 0;
            },
            getLabels() {
                this.$store.dispatch('ajax', {url: 'services/app-zonghe/api/converter/getLabelColumn', method: 'get', succeed: (res) => {
                        this.labels = res.rows;
                    }
                });
            },
            getFiled() {
                this.$store.dispatch('ajax', {url: 'api/converter/getFieldName', method: 'get', data: {source_id: this.form.source_id, sql: this.form.sql},
                    succeed:
                        (res) => {
                            this.form.fields = [];
                            for (const row of res.rows) {
                                this.form.fields.push({source_field: row, target_attr: '', is_conv: 0});
                            }
                        }
                });
            }
        },
        mounted: function () {
            this.jump(1);
            this.getLabels();

            this.$store.dispatch('ajax', {url: 'api/dataSource/queryDataSourceList', method: 'get', data: {page: 1, number: 999},
                succeed:
                    (res) => {
                        this.sources = res.rows;
                    }
            });
        }
    }
</script>
